<breadcrumb></breadcrumb>

<section>
  <h2>Basic chips</h2>
  <mat-chip-listbox>
    <mat-chip-option>Carnation</mat-chip-option>
    <mat-chip-option>Irises</mat-chip-option>
    <mat-chip-option>Buttercup</mat-chip-option>
  </mat-chip-listbox>
</section>

<section>
  <h2>Chips avatar</h2>

  <mat-chip-listbox aria-label="Dog selection">
    <mat-chip>
      <img matChipAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg"
           alt="Photo of a Shiba Inu" />
      Dog one
    </mat-chip>
    <mat-chip color="primary">
      <img matChipAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg"
           alt="Photo of a Shiba Inu" />
      Dog two
    </mat-chip>
    <mat-chip color="accent">
      <img matChipAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg"
           alt="Photo of a Shiba Inu" />
      Dog three
    </mat-chip>
  </mat-chip-listbox>
</section>

<section>
  <h2>Removable chips in a form field</h2>

  <mat-form-field>
    <mat-label>Contributors</mat-label>
    <mat-chip-grid #chipGrid>
      <mat-chip-row *ngFor="let person of people"
                    [color]="color" [editable]="true"
                    (removed)="remove(person)"
                    (edited)="edit(person, $event)">
        {{person.name}}
        <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip-row>
    </mat-chip-grid>
    <input matInput placeholder="New Contributor..."
           aria-label="New contributor"
           [matChipInputFor]="chipGrid"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)" />
  </mat-form-field>
</section>

<section>
  <h2>Colored chips</h2>
  <p>This example is good for contrast-radio checking.</p>
  <mat-chip-listbox>
    <mat-chip-option color="primary">Primary</mat-chip-option>
    <mat-chip-option color="accent">Accent</mat-chip-option>
    <mat-chip-option color="warn">Warn</mat-chip-option>
  </mat-chip-listbox>
</section>

<section>
  <h2>Stacked chips</h2>
  <mat-chip-listbox class="mat-mdc-chip-set-stacked">
    <mat-chip-option selected color="primary">Lemon</mat-chip-option>
    <mat-chip-option selected color="accent">Lime</mat-chip-option>
    <mat-chip-option selected color="warn">Grapefruit</mat-chip-option>
  </mat-chip-listbox>
</section>
